<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>怎样做一个符合w3c规范的网页_唐山市众知广告策划有限公司</title>
<meta name="keywords" content="怎样,做,一个,符合,w3c,规范,的,网页,作为," />
<meta name="description" content="作为网站技术开发人员而言,往往是站在自己的开发角度来实 施网站布署(读取数据及开发的方便性等等),而不是站在网站访问者与搜索引擎角度。因此大部分的网站在浏览方面不够直观" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="email=no" name="format-detection">
<link href="/skin/css/pintuer.css" rel="stylesheet"/>
<script src="/skin/js/jquery.js"></script>
<script src="/skin/js/pintuer.js"></script>
<script src="/skin/js/respond.min.js"></script>
<link href="/skin/css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrap-header">
  <div class="layout bg-black wrap-top">
    <div class="container height-big"> <span class="float-right">      <!--<a href="#" class="text-red">中文站</a>  <span class="text-little"> | </span><a href="#" class="">English</a>-->   </span> <span class="hidden-l">唐山市众知广告策划有限公司欢迎您！</span> </div>
  </div>
  <div class="container">
    <div class="line">
      <div class="xl12 xs12 xm6 xb6 padding-big-top padding-big-bottom">
        <button class="button icon-navicon float-right" data-target="#navbar1"></button>
        <a href="/"><img src="/skin/images/logo.png" style="width:247px;height:60px;" alt="唐山市众知广告策划有限公司"/></a> </div>
      <div class="text-left padding-big-top hidden-l hidden-s xm6 xb6">
        <div class="tel"> <span class="icon-envelope"></span> 公司邮箱<strong>suruin@qq.com</strong>      <span class="icon-phone-square"></span> 客服热线<strong>4008-668-998</strong> </div>
      </div>
    </div>
  </div>
</div>
<!--end header-->
<div class="bg-nav">
  <div class="container navbar nav-big bg-inverse radius">
    <div class="navbar-body nav-navicon" id="navbar1">
      <ul class="nav nav-menu nav-inline nav-pills">
        <li ><a href="/" class="topa"> 网站首页</a></li>
        <li class=''><a href="/a/about/" class="topa">关于我们</a>
          <ul style="display:none"
            >
            
          </ul>
        </li><li class='active'><a href="/a/news/" class="topa">新闻动态</a>
          <ul class="drop-menu"
            >
            
            <li><a href="/a/gongsixinwen/">公司新闻</a></li>
            
            <li><a href="/a/xingyexinwen/">行业新闻</a></li>
            
            <li><a href="/a/chanpinzhishi/">产品知识</a></li>
            
          </ul>
        </li><li class=''><a href="/a/products/" class="topa">产品中心</a>
          <ul class="drop-menu"
            >
            
            <li><a href="/a/lm1/">产品一类</a></li>
            
            <li><a href="/a/lm2/">产品二类</a></li>
            
            <li><a href="/a/lm3/">产品三类</a></li>
            
            <li><a href="/a/lm4/">产品四类</a></li>
            
            <li><a href="/a/lm5/">产品五类</a></li>
            
          </ul>
        </li><li class=''><a href="/a/case/" class="topa">案例展示</a>
          <ul style="display:none"
            >
            
          </ul>
        </li><li class=''><a href="/a/rongyu/" class="topa">荣誉资质</a>
          <ul style="display:none"
            >
            
          </ul>
        </li><li class=''><a href="/a/jishu/" class="topa">技术优势</a>
          <ul style="display:none"
            >
            
          </ul>
        </li><li class=''><a href="/a/contact/" class="topa">联系我们</a>
          <ul style="display:none"
            >
            
          </ul>
        </li>
      </ul>
      <div class="navbar-form navbar-left margin-top text-right">
        <form  name="formsearch" action="/plus/search.php">
          <input type="hidden" name="kwtype" value="0" />
          <input type="text" class="input input-auto" name="q" size="21" placeholder="关键词" />
          <span class="addbtn">
          <button type="submit" class="button ss-btn">搜索</button>
          </span>
        </form>
      </div>
    </div>
  </div>
</div>
 
<!--end header-->
<div class="layout"> <img src="/skin/images/about.jpg" alt="怎样做一个符合w3c规范的网页"/> </div>
<!--end banner-->
<div class="layout bg-gray margin-big-bottom">
  <div class="container">
    <ul class="bread">
      <li><a href='//'>主页</a> > <a href='/a/news/'>新闻动态</a> > <a href='/a/xingyexinwen/'>行业新闻</a> > </li>
    </ul>
  </div>
</div>
<div class="layout padding-big-top padding-big-bottom">
  <div class="container padding-big-bottom">
    <h1 class="padding-big-bottom text-center">怎样做一个符合w3c规范的网页</h1>
    <div class="container padding news-line"> 作者：admin&nbsp;&nbsp;&nbsp;&nbsp;来源：未知&nbsp;&nbsp;&nbsp;&nbsp;发布时间：2015-10-09 10:12&nbsp;&nbsp;&nbsp;&nbsp;浏览量：<script src="/plus/count.php?view=yes&aid=1&mid=1" type='text/javascript' language="javascript"></script> </div>
    <div class="news-body"> <div>
	作为网站技术开发人员而言,往往是站在自己的开发角度来实 施网站布署(读取数据及开发的方便性等等),而不是站在网站访问者与搜索引擎角度。因此大部分的网站在浏览方面不够直观或是方便,特别是现在w3c的规范,更是在大部分的网站开发人员脑里一片空白。何况百度 、google、msn、yahoo等专业搜索引擎更有自己的搜索规则及判断网页等级技术,所以网站要优化,优化的目的只有一个：符合标准,符合蜘蛛爬行的标准,更重要的是符合网站访问者浏览的方便及易用性。以下文章中，AB织梦模板网主要通过三个方面来讲述有关W3C!</div>
<div>
	&nbsp;</div>
<div>
	什么是W3C标准</div>
<div>
	W3C其实就是World Wide Web Consortium,全球万维网联盟的简称。W3C的主要职责就是确定未来万维网的发展方向,并且制定相关的推荐(recommendation, 由于W3C是一个民间组织,没有约束性,因此只提供建议)。HTML4.01规范建议(HTML4.01 Specification Recommendation)就是由W3C所制定的。它还负责制定XML,MathML等其他网络语言规范。</div>
<div>
	&nbsp;</div>
<div>
	怎样通过W3C标准的验证?</div>
<div>
	步骤方法如下：</div>
<div>
	1、图片的alt=&quot;&quot; 属性必须每张图片都加上，而且对齐属性用CSS来定义。不加不能通过XHTML 1.0的验证。</div>
<div>
	2、每个文档必须加上DTD声明。</div>
<div>
	a) !DOCTYPE html PUBLIC &quot;-//W3C//DTDXHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</div>
<div>
	去掉后能通过验证，但有警告：No DOCTYPE found! Checking with default XHTML 1.0 Transitional Document Type.</div>
<div>
	3、RSS的XML通过时其中的域名地址必须与检测的地址一致，否则会报错。</div>
<div>
	4、标签的链接属性加上JAVASCRIPT事件时必须为#空链,不能为javascript:;或javascript:void(null);</div>
<div>
	5、同一个页面当中，同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。</div>
<div>
	&lt;div id=&quot;a1&quot;&gt;111&lt;/div&gt;</div>
<div>
	&lt;div id=&quot;a1&quot;&gt;222&lt;/div&gt;</div>
<div>
	如果不用W3C来检测的话，在CSS设计里是允许这样做的。</div>
<div>
	那是程序的角度不能相同，CSS上是可以相同的!</div>
<div>
	之前就是相同的产生问题，后面就改成类引用了!</div>
<div>
	6、不可省略双引号或单引号。</div>
<div>
	a) 这个是指属性，标准是双引号~</div>
<div>
	单引号也能通过验证。</div>
<div>
	7、标签之间不可错位嵌套。</div>
<div>
	&lt;div class=&quot;CaseDetaListSS&quot;&gt;原文链接：&lt;a href=&#39;/html/cases/cases_61.html&#39;&gt;官方网站&lt;/div&gt;&lt;/a&gt;</div>
<div>
	这是不允许的。</div>
<div>
	8、所有的标签都使用小写。</div>
<div>
	9、FLASH的标签代码中不能含有,必须采用其它的方法实现。</div>
<div>
	10、所有的标签中含有的属性必须有值(官方的说法)。</div>
<div>
	11、标签必须配对完成,单标签必须以/关闭</div>
<div>
	12、JS和CSS外部引入文件必须加上类型定义。</div>
<div>
	13、所有的样式全部写在外部文件。用类名定义。在使用的地方引用。</div>
<div>
	14、页面上的一些特殊字符必须用HTML代码来标识.如&ldquo;&amp;&rdquo;写成&ldquo;&amp;&ldquo;</div>
<div>
	&nbsp;</div>
<div>
	没通过W3C 标准验证的原因</div>
<div>
	每次修正代码后要刷新代码，使它们重新生效&mdash;&mdash;一个小错误常常会引发之后整页的连串错误。因此如果操作不当，&ldquo;修正错误&rdquo;也可能引发更多错误。每次修正后使代码重新生效，这样就可以确保完全解决问题。</div>
<div>
	知道了上面这些基本的异常情况，下面discuz模板网就来看看版面设计无效的几个原因。</div>
<div>
	1、div 标签未关闭</div>
<div>
	这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时，总会大吃一惊。开启的div标签是最普遍的版块设计失误之一，也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签，诊断时就像大海捞针一样麻烦。</div>
<div>
	2、麻烦的embed标签</div>
<div>
	九十年代早期，Microsoft和Netscape的浏览器开始能够辨认非标准的独有字体。遗憾的是这意味着W3C验证程序还不能识别某些关键HTML 标签，如&ldquo;embed&rdquo;，即使这些标签已经被广泛使用。如果确实希望得到严格的DOCTYPE(文档类型)验证，就只能放弃嵌套。</div>
<div>
	如果同时想要生效的版面设计和嵌入式媒体，可以试试Flash Satay方法。</div>
<div>
	3、不当的DOCTYPE声明</div>
<div>
	不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。Strict 声明代码如下：</div>
<div>
	&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</div>
<div>
	4、结尾斜线</div>
<div>
	如果你的网站不能验证，很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。例如：</div>
<div>
	在严格的DOCTYPE中这是无效的。要在img标签结尾处加上&ldquo;/&rdquo;以解决此问题。</div>
<div>
	&lt;img src=&quot;&quot; alt=&quot;&quot;&gt;</div>
<div>
	5、Align标签</div>
<div>
	如果DOCTYPE被设为Transitional，你就会使用&ldquo;align&rdquo;标签，但如果要求更高一点希望得到Strict验证，你会看到很多错误。 Align是另一个不可用于版面设计的标签。可以尝试用&ldquo;float&rdquo;或者&ldquo;text-align&rdquo;来代替align转换元素。</div>
<div>
	6、JavaScript</div>
<div>
	如果已经声明Strict DOCTYPE，就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员，因为网站倾向于为广告和追踪脚本使用嵌入的 JavaScript。如果必须用到JavaScript，可以在其前后加上如下标签：</div>
<div>
	&lt;script type=&quot;text/javascript&quot;&gt;&nbsp;</div>
<div>
	/* &lt;![CDATA[ */</div>
<div>
	// JavaScript here</div>
<div>
	};</div>
<div>
	/* ]]&gt; */</div>
<div>
	&lt;/script&gt;</div>
<div>
	7、图像需要&ldquo;alt&rdquo;属性</div>
<div>
	你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像，如alt= &rdquo;Scary vampire picture&rdquo;.</div>
<div>
	搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的。</div>
<div>
	8、未知实体数据</div>
<div>
	实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替&ldquo;&amp;&rdquo;等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。</div>
<div>
	9、不良嵌套</div>
<div>
	嵌套就是元素里又包括元素，如下所示：</div>
<div>
	&lt;div&gt;&lt;strong&gt;Sweet!&lt;/strong&gt;&lt;/div&gt;</div>
<div>
	我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签，但又先关闭div标签。这可能不会改变版块布局，但却会使你的版块设计失效。</div>
<div>
	10、缺少&ldquo;title&rdquo;标签</div>
<div>
	尽管这看上去是一个很明显的错误，很多程序员(包括我自己)还是经常会在&ldquo;head&rdquo;版块中遗漏title标签。当你看到&ldquo;missing a required sub-element of HEAD&rdquo;(缺少HEAD的必要子元素)时，才会发现自己忘记添加title标签了。</div>
 </div>
  </div>
  <div class="container padding-big">
    <div class="xl12 xs12 xm6 xb6">上一篇：没有了 </div>
    <div class="xl12 xs12 xm6 xb6 text-right">下一篇：<a href='/a/xingyexinwen/2.html'>网络公司告诉你有关面包屑导航的事</a> </div>
  </div>
</div>
<!--end 产品内容-->

<div class="layout padding-big-top padding-big-bottom bg-gray">
  <div class="container padding-big-top padding-big-bottom">
    <h1 class="padding-bottom text-center">相关新闻推荐</h1>
    <div class="layout text-center"><a class="button border-main" href="/a/news/">更多>></a> </div>
    <div class="container padding-big">
      <div class="xl12 xs12 xm6 xb6 newsitem padding-big-top">
        <ul>
          <li class="clearfix"> <a href="/a/lm4/12.html" title="产品名称14">
            <div class="news-date">
              <div class="news-date1">02</div>
              <div class="news-date2">2017/12</div>
            </div>
            <div class="news-bodys">
              <h3>产品名称14</h3>
              <p>​这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！ 这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！...</p>
            </div>
            </a> </li>
<li class="clearfix"> <a href="/a/lm3/11.html" title="产品名称13">
            <div class="news-date">
              <div class="news-date1">02</div>
              <div class="news-date2">2017/12</div>
            </div>
            <div class="news-bodys">
              <h3>产品名称13</h3>
              <p>​这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！ 这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！...</p>
            </div>
            </a> </li>
<li class="clearfix"> <a href="/a/lm5/13.html" title="产品名称17">
            <div class="news-date">
              <div class="news-date1">02</div>
              <div class="news-date2">2017/12</div>
            </div>
            <div class="news-bodys">
              <h3>产品名称17</h3>
              <p>​这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！ 这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！...</p>
            </div>
            </a> </li>

        </ul>
      </div>
      <div class="xl12 xs12 xm6 xb6 newsitem padding-big-top">
        <ul>
          <li class="clearfix"> <a href="/a/lm5/15.html" title="产品名称15">
            <div class="news-date">
              <div class="news-date1">02</div>
              <div class="news-date2">2017/12</div>
            </div>
            <div class="news-bodys">
              <h3>产品名称15</h3>
              <p>​这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！ 这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！...</p>
            </div>
            </a> </li>
<li class="clearfix"> <a href="/a/lm2/10.html" title="产品名称12">
            <div class="news-date">
              <div class="news-date1">02</div>
              <div class="news-date2">2017/12</div>
            </div>
            <div class="news-bodys">
              <h3>产品名称12</h3>
              <p>​这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！ 这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！...</p>
            </div>
            </a> </li>
<li class="clearfix"> <a href="/a/lm2/16.html" title="产品名称11">
            <div class="news-date">
              <div class="news-date1">02</div>
              <div class="news-date2">2017/12</div>
            </div>
            <div class="news-bodys">
              <h3>产品名称11</h3>
              <p>​这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！ 这里是产品的文字描述，后台发布产品时进行编辑，前台会自动调用！...</p>
            </div>
            </a> </li>

        </ul>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>
<!--end 新闻推荐--> 
<div class="layout padding-big-top padding-big-bottom bg-gray">
  <div class="container"> <b>友情链接：</b>   <a href='http://www.dede58.com/host/' target='_blank'>织梦主机</a>       <a href='http://www.aitecms.com/' target='_blank'>企业网站模板</a>       <a href='http://www.zhangguizi.com/' target='_blank'>掌柜子</a>       <a href='http://www.sucai58.com/' target='_blank'>建站素材</a>       <a href='http://www.adashuo.com/' target='_blank'>创业找项目</a>       <a href='http://www.dede58.com/' target='_blank'>织梦模板</a>       <a href='http://www.yiyongtong.com/' target='_blank'>微信小程序开发</a>      </div>
</div>
<div class="container-layout bg-footnav padding-big-top padding-big-bottom clearfix">
  <div class="padding container">
    <div class="xl12 xs12 xm8 xb9 footmenu">
      <p>在线客服  ：<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=932746553&menu=yes" rel="nofollow" ><i class="qq"></i></a>     服务热线：4008-668-998 
            电子邮箱: suruin@qq.com </p>
      <p>公司地址：河北省唐山市</p>
      <p> 三亚云之砚智能安装工程有限公司是一家专业从事酒店智能工程、程控电话、监控远程控制、WIFI网络覆盖、电子门锁、发电机、太阳能利用、小区门禁、电动道闸、电动大门、电动窗帘、智能家居、保安智能巡检、电梯3-5方对讲、...</p>
    </div>
    <div class="hidden-l hidden-s xm4 xb3 text-right wx"> <img class="foot-weixin" src="/skin/images/weixin.jpg"> </div>
    <div class="clearfix"></div>
  </div>
</div>
<div class="container-layout bg-sub padding-top padding-bottom clearfix">
  <div class="container">
    <div class="xl12 xs12 xm9 xb9"> Copyright &copy; 唐山市众知广告策划有限公司 版权所有 <a href="http://www.dede58.com" target="_blank">Power by DeDe58</a></div>
    <div class="hidden-12 hidden-12 xm3 xb3 by"> <a href="http://www.miitbeian.gov.cn" target="_blank">备案号：冀ICP备16046378号-1</a></div>
    <div class="clearfix"></div>
  </div>
</div>

</body>
</html>